<template>
	<div>

		<div class="app-container">
			<TopInfo />

			<Search :lookup="data.lookup" @investigate="inves" />

			<div class="w-full relative">
				<el-radio-group v-model="data.sement.groupType" @change="getlist">
					<el-radio-button :label="1" :value="1">
						{{ $t('machine.custom.way') }}
					</el-radio-button>
					<el-radio-button :label="2" :value="2">
						{{ $t('machine.custom.advertise') }}
					</el-radio-button>
				</el-radio-group>

				<div class="absolute top-0 right-0">
					<el-button type="danger" size="small" @click="add">
						<template #default>
							<span class="text-sm">{{ $t('machine.custom.releasePlan') }}</span>
						</template>
					</el-button>
				</div>

			</div>


		</div>

		<div class="app-container" v-loading="data.mtloading">
			<div v-if="data.sement.groupType == 1">
				<el-table :data="data.list" :header-cell-style="{ 'text-align': 'center' }"
					:cell-style="{ 'text-align': 'center' }" class="w-full">

					<el-table-column prop="machine_id" :label="$t('machine.code')" show-overflow-tooltip>
						<template #default="scope">
							{{ scope.row.machine_id || '--' }}
						</template>
					</el-table-column>

					<el-table-column prop="machine_name" :label="$t('machine.name')" show-overflow-tooltip>
						<template #default="scope">
							{{ scope.row.machine_name || '--' }}
						</template>
					</el-table-column>

					<el-table-column prop="adv_num" :label="$t('machine.custom.advNum')" show-overflow-tooltip>
						<template #default="scope">
							{{ scope.row.adv_num || '0' }}
						</template>
					</el-table-column>

					<el-table-column :label="$t('public.operate')">
						<template #default="scope">

							<el-button type="primary" size="small" @click="detailsadv(scope.row.m_id)"
								v-prmis="'machine_getList'">
								{{ $t('public.manage') }}
							</el-button>

							<el-button v-prmis="'machine_advance_upDown'" type="info" size="small"
								:disabled="scope.row.adv_num <= 0 ? true : false" @click="Offshelf(scope.row.m_id, 1)">
								{{ $t('public.stop') }}
							</el-button>

						</template>
					</el-table-column>

				</el-table>
			</div>
			<div v-else>

				<el-table :data="data.list" :header-cell-style="{ 'text-align': 'center' }"
					:cell-style="{ 'text-align': 'center' }" class="w-full">

					<el-table-column prop="file_path" :label="$t('machine.custom.material')">
						<template #default="scope">
							<div @click="imgurl(scope.row.type, scope.row.file_path)">
								<el-image v-if="scope.row.type == 1" class="w-8" :src="scope.row.file_path"
									fit="fill" />
								<el-image v-else class="w-11" :src="bofang" fit="fill" />
							</div>
						</template>
					</el-table-column>

					<el-table-column prop="adv_title" :label="$t('machine.custom.pushTitle')" show-overflow-tooltip>
						<template #default="scope">
							{{ scope.row.adv_title || '--' }}
						</template>
					</el-table-column>

					<el-table-column prop="status" :label="$t('machine.custom.advertiseStatus')" width="120">
						<template #default="scope">
							<el-tag :type="getstatus(scope.row.status, 1)">{{ getstatus(scope.row.status, 2) }}</el-tag>
						</template>
					</el-table-column>

					<el-table-column prop="start_date" :label="$t('date.releaseDate')" width="200">
						<template #default="scope">
							{{ getPlevel.gettime(scope.row.start_date, 1) }} ~ {{ getPlevel.gettime(scope.row.end_date,
								1) }}
						</template>
					</el-table-column>

					<el-table-column prop="start_date" :label="$t('date.releaseTime')" width="200">
						<template #default="scope">
							{{ getPlevel.gettohms(scope.row.start_time) }} ~ {{ getPlevel.gettohms(scope.row.end_time)
							}}
						</template>
					</el-table-column>

					<el-table-column prop="machine_num" :label="$t('machine.custom.applica')" width="200">
						<template #default="scope">
							<el-link type="primary" :underline="false" @click="apply(scope.row.batch_num)">{{
								scope.row.machine_num }}</el-link>
						</template>
					</el-table-column>

					<el-table-column :label="$t('public.operate')">
						<template #default="scope">
							<el-button v-prmis="'machine_advance_upDown'" type="info" size="small"
								@click="Offshelf(scope.row.batch_num, 2)">
								{{ $t('public.stop') }}
							</el-button>

						</template>
					</el-table-column>

				</el-table>

				<PageNum :total="data.total" :page="data.sement" @exposeData="current" @fraction="fraction" />

			</div>

		</div>


		<el-dialog v-if="data.macsing" v-model="data.macsing" width="30%">
			<el-table :data="data.maclist" v-loading="data.mcloading" :header-cell-style="{ 'text-align': 'center' }"
				:cell-style="{ 'text-align': 'center' }" class="w-full max-h-80" style="overflow: auto;" height="20rem"
				@selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55" />
				<el-table-column prop="machine_id" :label="$t('machine.code')" show-overflow-tooltip />
				<el-table-column prop="machine_name" :label="$t('machine.name')" show-overflow-tooltip />
			</el-table>

			<div class="w-full text-right mt-4">
				<div class="inline-block">

					<el-button type="primary" size="small" @click="cease">
						{{ $t('public.stop') }}
					</el-button>

					<el-button size="small" @click="data.macsing = false">
						{{ $t('public.cancel') }}
					</el-button>

				</div>
			</div>
		</el-dialog>

		<el-dialog v-if="data.vodesing" v-model="data.vodesing" width="30%">
			<div v-if="data.objcet.type == 1" class="flex justify-center">
				<el-image class="max-w-60" :src="data.objcet.url" fit="fill" />
			</div>
			<Video v-else :url="data.objcet.url" />
		</el-dialog>

	</div>

</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t: $t } = useI18n()
import TopInfo from '@/components/TopInfo/index.vue';
import Search from '@/components/Search/index.vue';
import PageNum from '@/components/PageNum/index.vue';
import getPlevel from '@/utils/level';
import bofang from '@/assets/bofang.png';
import { useRouter } from 'vue-router';
import { getGroupList, upDownpush, getpushList } from '@/api/machine_custom';
const router = useRouter();
let data = reactive({
	mtloading: false, // 加载
	mcloading: false, // 适用设备加载
	vodesing: false, // 素材大图预览
	macsing: false, // 适用设备弹窗
	lookup: [// 筛选栏
		{ title: $t('machine.name') + '/ID', type: 'mId', value: '', key: 'm_id' },
		{ title: $t('machine.advName'), type: 'input', value: '', key: 'adv_title' },
	],
	state: [ // 广告状态
		{ label: $t('goods.corner.not'), value: 1 },
		{ label: $t('goods.corner.progress'), value: 2 },
		{ label: $t('goods.corner.Completed'), value: 3 },
		{ label: $t('marketing.guess.active'), value: 4 },
		{ label: $t('marketing.guess.delMaterial'), value: 5 },
	],
	list: [], // 列表数据
	maclist: [], // 适用设备
	macId: [], // 选中设备
	objcet: {}, // 素材预览
	sement: { // 筛选数据
		groupType: 1,
		push_type: '',
		// machine: '',
		adv_title: '',
		pageNum: 15,
		page: 1
	},
	total: 0, // 总条数
})

// 获取列表信息
let getlist = () => {
	data.mtloading = true
	getGroupList(data.sement).then(res => {
		data.mtloading = false
		if (res.state == 200) {
			data.list = res.data.data;
			data.total = res.data.total;
		}
	})
}

// 查询回调
let inves = (e) => {
	for (let key in e) {
		data.sement[key] = e[key];
	}
	data.sement.page = 1;
	data.sement.pageNum = 15;
	getlist()
};

// 页数回调
let current = (e) => {
	data.sement.page = e
	getlist()
}

// 条数回调
let fraction = (e) => {
	data.sement.pageNum = e
	getlist()
}


// 查看大图
let imgurl = (e, k) => {
	data.objcet = {
		type: e,
		url: k
	};
	data.vodesing = true;
};

// 广告推送状态
let getstatus = (e, k) => {
	if (e != undefined) {
		let color = ['info', 'info', '', 'success', 'warning', 'danger'];
		if (k == 1) {
			return color[e];
		}
		if (k == 2) {
			if (e == 0) {
				return '未知';
			} else {
				return data.state[e - 1].label;
			}
		}
	}
};

// 管理
let detailsadv = (e) => {
	let query = {
		l: encodeURI(
			JSON.stringify({
				info: e
			})
		)
	};
	router.push({ path: '/machine/custom/info/details_adv', query: query });
}

// 广告推送
let add = () => {
	router.push({ path: '/machine/custom/info/add_info' });
};

// 下架广告
let Offshelf = (e, k) => {
	ElMessageBox.confirm($t('message.removeAdv'))
		.then(res => {
			let obj = {
				status: 4
			}
			if (k == 1) {
				obj.m_id = e
			} else if (k == 2) {
				obj.batch_num = e
			} else {
				obj.adv_id = e
			}

			upDownpush(obj).then(res => {
				if (res.state == 200) {
					ElMessage({
						message: $t('message.downSuccess'),
						type: 'success'
					});
					data.macsing = false
					getlist();
					return;
				}
				ElMessage({
					message: $t('message.networkFailed'),
					type: 'error'
				});
			});
		})
		.catch(err => {
			console.log('取消');
		});
};

// 通过素材获取设备
let apply = (e) => {
	let obj = {
		batch_num: e
	}
	data.macsing = true
	data.mcloading = true
	data.maclist = []
	getpushList(obj).then(res => {
		data.mcloading = false
		if (res.state == 200) {
			for (let item of res.data) {
				if (item.status <= 2) {
					data.maclist.push(item)
				}
			}
		}
	})
}

// 选中设备
let handleSelectionChange = (e) => {
	data.macId = []
	for (let item of e) {
		data.macId.push(item.adv_id);
	}
};

// 停止订单
let cease = () => {
	if (data.macId.length == 0) {
		ElMessage({
			message: $t('message.pleaseSelectMachine'),
			type: 'error'
		});
		return
	}

	Offshelf(data.macId.join(','), 3)
}

getlist()


</script>
